<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 侧边栏导航 -->
    <ul class="side_box">
      <li>京东秒杀</li>
      <li>每日特价</li>
      <li>特色优选</li>
      <li>频道广场</li>
      <li>为你推荐</li>
      <li>京东直营</li>
    </ul>
    <div class="go_top" onclick="goTop()">
      <div>
        <svg
          t="1676717123963"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2605"
          width="24"
          height="24"
        >
          <path
            d="M484.538555 297.401434 78.508052 703.407378c-11.784394 11.813047-11.784394 30.912034 0 42.724057 11.81714 11.81407 30.94171 11.81407 42.757826 0l386.211109-386.181433 379.830795 379.806235c11.453866 11.482519 30.039153 11.482519 41.491996 0 11.511171-11.453866 11.511171-30.039153 0-41.516556L534.372543 303.776631c-1.543146-1.539053-3.417843-2.296299-5.200442-3.412726-0.691755-0.935302-1.055029-2.085498-1.933025-2.962471-11.784394-11.784394-30.912034-11.784394-42.695405 0L484.538555 297.401434zM484.538555 297.401434"
            fill="#bfbfbf"
            p-id="2606"
          ></path>
        </svg>
      </div>
      <div>顶部</div>
    </div>
    <!-- 内容 -->
    <div class="content">
      <div data-index="0">京东秒杀</div>
      <div data-index="1">每日特价</div>
      <div data-index="2">特色优选</div>
      <div data-index="3">频道广场</div>
      <div data-index="4">为你推荐</div>
      <div data-index="5">京东直营</div>
    </div>

    <script>
      let boxs = document.querySelectorAll(".side_box > li");
      let items = document.querySelectorAll(".content > div");

      function handleItem(event) {
        let index = event.target.index;
        for (let i = 0; i < boxs.length; i++) {
          boxs[i].className = "";
        }
        boxs[index].setAttribute("class", "current");
        let scrollTop = items[index].offsetTop - 60;
        animate(window, scrollTop);
      }

      function goTop() {
        for (let i = 0; i < boxs.length; i++) {
          boxs[i].className = "";
        }
        animate(window, 0);
      }

      function initEvent() {
        for (let i = 0; i < boxs.length; i++) {
          boxs[i].index = i;
          boxs[i].addEventListener(
            "click",
            function () {
              handleItem(event);
            },
            false
          );
        }
      }

      initEvent();

      //   滚动动画函数
      function animate(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
          // 步长值
          let step = (target - window.pageYOffset) / 15;

          step = step > target ? Math.ceil(step) : Math.floor(step);
          if (!step) {
            clearInterval(obj.timer);
            if (callback) {
              callback();
            }
          }
          window.scroll(target, window.pageYOffset + step);
        }, 15);
      }
    </script>

    <style>
      body {
        background: #f4f4f4;
      }
      .side_box {
        color: #333333;
        position: fixed;
        right: 30px;
        top: 25vh;
        background: #f4f4f4;
        padding: 0;
      }

      .side_box > li,
      .go_top {
        list-style: none;
        width: 50px;
        text-align: center;
        background: #fff;
        cursor: pointer;
        padding: 10px 5px;
        box-sizing: border-box;
        border: solid #eeeeee 1px;
      }

      .content > div {
        height: 70vh;
        display: flex;
        justify-content: center;
        /* align-items: center; */
        margin-top: 20px;
        font-weight: bold;
        font-size: 30px;
        color: #333333;
        background-color: #d5e9e0;
        padding-top: 50px;
        box-sizing: border-box;
      }

      .content > div:nth-child(4) {
        height: 90vh;
      }

      .content > div:nth-child(5) {
        height: 120vh;
      }

      .go_top {
        padding: 5px;
        position: fixed;
        bottom: 40px;
        right: 30px;
        border-radius: 5px;
      }

      .current {
        background: pink !important;
        font-weight: bold;
      }
    </style>
  </body>
</html>
